<template>
    <div class="box-border h-screen w-full flex flex-row items-stretch">
        <aside class="flex-none w-[72px] h-full overflow-y-hidden flex flex-col bg-linear-0 from-[#F4F6FC] from-0% to-[#F9F9FB] to-100% border-r border-solid border-r-[#496EA9]/10" :class="collapsed ? '' : 'large-screen'">
            <RouterLink to="/" class="h-[76px] flex-none flex flex-row justify-center items-center cursor-pointer select-none gap-[10px] logo-wrap">
                <img src="/images/logo.png" alt="logo" :width="32" :height="32" class="size-8 block object-cover logo" />
                <span class="text-theme font-bold text-xl hidden logo-text">智聘</span>
            </RouterLink>
            <nav class="flex-1 overflow-y-auto pb-5 box-border nav-links">
                <ul class="flex flex-col items-center gap-[10px]">
                    <li v-for="route of navRoutes" :key="route.name" class="size-15 touchable-opacity nav-item-wrap">
                        <a-tooltip :title="collapsed ? route.text : ''" placement="right">
                            <RouterLink :to="{name: route.name}" 
                                class="w-full h-full flex flex-col justify-center items-center gap-1 text-primary text-sm rounded-xl nav-item"
                                :class="matchedNavRoute === route.matchedName ? 'exact-active-nav' : ''"
                                exact-active-class="exact-active-nav"
                            >
                                <GpFontIcon :name="matchedNavRoute === route.matchedName ? route.activeIcon : route.icon" class="nav-item-icon"/>
                                <span class="hidden nav-item-text">{{ route.text }}</span>
                            </RouterLink>
                        </a-tooltip>
                    </li>
                </ul>
            </nav>
            <section class="flex-none pb-6">
                <ul class="flex flex-col items-center gap-[10px] nav-actions">
                    <li class="flex flex-row justify-center items-center touchable-opacity group size-10">
                        <a-tooltip :placement="collapsed ? 'right' : 'top'" :title="collapsed ? '展开': '收缩'" :align="{offset: [0, collapsed ? 0 : 20]}">
                            <GpFontIcon :name="collapsed ? 'icon-zhankaicaidan' : 'icon-shouqicaidan'" class="!text-[40px] text-[#acaeb2] group-hover:text-secondary" @click="handleToggle()"/>
                        </a-tooltip>
                    </li>
                    <li class="flex flex-row justify-center items-center touchable-opacity group size-10">
                        <a-popover trigger="hover" :placement="collapsed ? 'right' : 'topRight'" :arrow="false" :align="{offset: [collapsed ? 20 : 0, 0]}">
                            <template #title>
                                <span class="text-sm text-third font-normal">切换企业</span>
                            </template>
                            <template #content>
                                <div class="box-border">
                                    <ul class="flex flex-col">
                                        <li v-for="item of companys" :key="item.id" @click="userStore.switchCompany(item.id!)" 
                                            class="flex flex-row items-center justify-between h-10 box-border px-2 text-sm text-primary touchable-opacity company-item" 
                                            :class="currentCompany === item.id ? 'active-company-item' : ''"
                                        >
                                            <span>{{ item.name }}</span>
                                            <GpFontIcon name="icon-xuanzhong" class="hidden" />
                                        </li>
                                    </ul>
                                    <a-divider style="margin-block: 8px;" />
                                    <div class="flex flex-row justify-start">
                                        <div class="flex flex-row items-center gap-2 text-theme touchable-opacity" @click="openCreateModal()">
                                            <GpFontIcon name="icon-tianjia2" />
                                            创建/加入企业
                                        </div>
                                    </div>
                                </div>
                            </template>
                            <GpFontIcon name="icon-gongsi" class="!text-[20px] text-[#acaeb2] group-hover:text-secondary"/>
                        </a-popover>
                    </li>                 
                    <RouterLink :to="{name: 'PersonalSettingPage'}" is="li" class="flex flex-row justify-center items-center touchable-opacity group size-10 user-avatar">
                        <GpAvatarImg :src="userStore.userInfo?.avatar" class="size-full" />
                    </RouterLink>
                </ul>
            </section>
        </aside>
        <main class="bg-[#F4F6FC] flex-1 overflow-y-auto pl-5 pr-8 box-border">
            <RouterView />
        </main>
        <a-modal v-bind="defaultModalProps" v-model:open="showCreateModal":title="null" :footer="null" :mask-closable="false">
            <!-- 新建企业 -->
            <GpCreateCompanyForm :action="registerAction" @success="handleCreateOrJoinSuccess" @switch="formMode = FormMode.Join" v-if="formMode === FormMode.Create"/>
            <!-- 加入已有企业 -->
            <GpJoinCompanyForm :action="joinAction" @success="handleCreateOrJoinSuccess" @switch="formMode = FormMode.Create" v-else-if="formMode === FormMode.Join"/>
        </a-modal>
        <GpLogoutModal />
        <ImgCropModal ref="imgCropModalRef" />
        <VideoPreviewModal ref="VideoPreviewModalRef" />
    </div>
</template>
<script lang="ts" setup>
import { postMyEnter, postMyRegister } from '@/api/siderBar/my'
import { useUserStore } from '@/stores'
import { defaultModalProps } from '@/constants/comp-setting';
import { createImgCropContext, ImgCropModal } from '@/components/img-crop-modal'
import type { RouteMap, RouteMeta } from 'vue-router';
import { useAsideToggle } from './composables/useAsideToggle';

type NavRoute = {
    name: keyof RouteMap,
    matchedName: RouteMeta['navMatchedName'],
    icon: string
    activeIcon: string
    text: string
    disabled?: boolean
}
enum FormMode {
    Create,
    Join
}
defineOptions({
    name: 'IndexLayout'
})
definePage({
    name: 'IndexLayout',
    meta: {
        isLayout: true
    }
})
const { imgCropModalRef } = createImgCropContext()
const { VideoPreviewModalRef } = useCompRefs()
const navRoutes = ref((<Array<NavRoute>>[
    {
        name: "IndexPage",
        matchedName: "IndexPage",
        icon: "icon-gongzuotai",
        activeIcon: "icon-gongzuotai",
        text: "工作台",
        disabled: true
    },
    {
        name: "JobPositionPage",
        matchedName: "JobPositionPage",
        icon: "icon-zhipinzhiwei",
        activeIcon: "icon-zhipinzhiwei",
        text: "智聘职位"
    },
    {
        name: "AIChatPage",
        matchedName: "AIChatPage",
        icon: "icon-AIgoutong",
        activeIcon: "icon-AIgoutong",
        text: "AI沟通"
    },
    {
        name: "EmployeePage",
        matchedName: "EmployeePage",
        icon: "icon-houxuanrenku",
        activeIcon: "icon-houxuanrenku",
        text: "候选人库",
        disabled: true
    },
    {
        name: "AIKnownsPage",
        matchedName: "AIKnownsPage",
        icon: "icon-AIzhishiku",
        activeIcon: "icon-AIzhishiku",
        text: "AI知识库"
    },
    {
        name: "MemberManagePage",
        matchedName: "CompSettingLayout",
        icon: "icon-gongsishezhi",
        activeIcon: "icon-gongsishezhi",
        text: "公司设置"
    },
]).filter(nav => !nav.disabled))
const route = useRoute()
const matchedNavRoute = computed(() => {
    if (route.path === "/") return route.name
    return route.meta.navMatchedName || route.matched.find(match => match.name && match.path !== "/")?.name
})
const { collapsed, handleToggle } = useAsideToggle()
const userStore = useUserStore()
const companys = computed(() => userStore.userInfo?.companys ?? [])
const currentCompany = computed(() => userStore.userInfo?.currentCompanyId)
const { state: showCreateModal, on: openCreateModal, off: closeCreateModal } = useSwitch(false)
const formMode = ref<FormMode>(FormMode.Create)
function registerAction(values: Partial<{
    name: string
    company: string
    scale: string
    position: string
}>) {
    return postMyRegister({
       companyName: values.company!,
       userName: values.name!,
       userPosition: values.position!,
       companyScale: values.scale!
    })
}
function joinAction(values: Partial<{
    name: string
    companyCode: string
}>) {
    return postMyEnter({
       inviteCode: values.companyCode!,
       userName: values.name!
    })
}
async function handleCreateOrJoinSuccess() {
    closeCreateModal()
    formMode.value = FormMode.Create
    await userStore.getUserInfo()
}
</script>
<style lang="less" scoped>
@reference "../../assets/styles/tailwind.css";
.nav-links :where(a) {
    color: var(--color-primary);
}
.nav-item:hover {
    @apply hover:bg-linear-270 hover:from-theme/4 hover:from-0% hover:to-theme/10 hover:to-100%;
}
.exact-active-nav {
    @apply !text-theme font-medium !bg-linear-270 from-theme/4 from-0% to-theme/10 to-100%;
}
.company-item {
    width: 272px;
    &:hover,
    &.active-company-item {
        background: rgba(7,104,250,0.06);
    }
    &.active-company-item {
        color: var(--color-theme);
        .iconfont {
            display: block;
        }
    }
}
.nav-item-icon {
    font-size: 20px!important;
    line-height: 20px!important;
}
.user-avatar {
    margin-block-start: 10px;
}
aside.large-screen {
    width: 164px;
    .logo-wrap {
        justify-content: flex-start;
        padding-inline-start: 24px;
        .logo {
            width: 28px;
            height: 28px;
        }
        .logo-text {
            display: block;
        }
    }
    .nav-item-wrap {
        width: 140px;
        height: 48px;
        .nav-item {
            flex-direction: row;
            justify-content: flex-start;
            gap: 12px;
            padding-inline: 14px;
            .nav-item-icon {
                font-size: 16px!important;
                line-height: 16px!important;
            }
            .nav-item-text {
                display: block;
            }
        }
    }
    .nav-actions {
        gap: 0;
        flex-direction: row-reverse;
        justify-content: center;
        .user-avatar {
            margin-block: 0;
            margin-inline-end: 20px;
        }
    }
}
</style>